<!--
  THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=graph-webkit-dep&version=5.3.2
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
  <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/dataTool.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
  <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
  <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
  <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/extension/bmap.min.js"></script>
  -->

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    myChart.showLoading();
    var webkitDep = {
    "type": "force",
    "categories": [
        {
            "name": "talks",
            "keyword": {},
            "base": "talks"
        },
        {
            "name": "speakers",
            "keyword": {},
            "base": "speakers"
        },
        {
            "name": "tags",
            "keyword": {},
            "base": "tags"
        }
    ],
    "nodes": [//展示的节点
        {"name": 0, "category": "talks"},
        {"name": 1, "category": "speakers"},
        {"name": 2, "category": "talks"},
        {"name": 3, "category": "tags"},
        {"name": 4, "category": "tags"},
        {"name": 5, "category": "talks"},
        {"name": 6, "category": "speakers"},
        {"name": 7, "category": "talks"},
        {"name": 8, "category": "tags"},
        {"name": 9, "category": "tags"},
        {"name": 10, "category": "talks"},
        {"name": 11, "category": "speakers"},
        {"name": 12, "category": "talks"},
        {"name": 13, "category": "tags"},
        {"name": 14, "category": "talks"},
        {"name": 15, "category": "speakers"},
        {"name": 16, "category": "talks"},
        {"name": 17, "category": "tags"},
        {"name": 18, "category": "tags"},
        {"name": 19, "category": "talks"},
        {"name": 20, "category": "speakers"},
        {"name": 21, "category": "talks"},
        {"name": 22, "category": "tags"},
        {"name": 23, "category": "tags"},
        {"name": 24, "category": "talks"},
        {"name": 25, "category": "speakers"},
        {"name": 26, "category": "talks"},
        {"name": 27, "category": "tags"},
        {"name": 28, "category": "talks"},
        {"name": 29, "category": "speakers"},
        {"name": 30, "category": "talks"},
        {"name": 31, "category": "talks"},
        {"name": 32, "category": "speakers"},
        {"name": 33, "category": "tags"},
        {"name": 34, "category": "talks"},
        {"name": 35, "category": "speakers"},
        {"name": 36, "category": "tags"},
        {"name": 37, "category": "talks"},
        {"name": 38, "category": "speakers"},
        {"name": 39, "category": "tags"},
        {"name": 40, "category": "talks"},
        {"name": 41, "category": "speakers"},
        {"name": 42, "category": "tags"},
        {"name": 43, "category": "talks"},
        {"name": 44, "category": "speakers"},
        {"name": 45, "category": "tags"},
        {"name": 46, "category": "talks"},
        {"name": 47, "category": "speakers"},
        {"name": 48, "category": "talks"},
        {"name": 49, "category": "speakers"},
        {"name": 50, "category": "tags"},
        {"name": 51, "category": "talks"},
        {"name": 52, "category": "tags"},
        {"name": 53, "category": "talks"},
        {"name": 54, "category": "speakers"},
        {"name": 55, "category": "tags"},
        {"name": 56, "category": "talks"},
        {"name": 57, "category": "tags"},
        {"name": 58, "category": "talks"},
        {"name": 59, "category": "speakers"},
        {"name": 60, "category": "tags"},
        {"name": 61, "category": "talks"},
        {"name": 62, "category": "tags"},
        {"name": 63, "category": "talks"},
        {"name": 64, "category": "speakers"},
        {"name": 65, "category": "tags"},
        {"name": 66, "category": "talks"},
        {"name": 67, "category": "talks"},
        {"name": 68, "category": "speakers"},
        {"name": 69, "category": "tags"},
        {"name": 70, "category": "tags"},
        {"name": 71, "category": "talks"},
        {"name": 72, "category": "speakers"},
        {"name": 73, "category": "tags"},
        {"name": 74, "category": "talks"},
        {"name": 75, "category": "speakers"},
        {"name": 76, "category": "talks"},
        {"name": 77, "category": "tags"},
        {"name": 78, "category": "talks"},
        {"name": 79, "category": "tags"},
        {"name": 80, "category": "talks"},
        {"name": 81, "category": "tags"},
        {"name": 82, "category": "talks"},
        {"name": 83, "category": "tags"},
        {"name": 84, "category": "talks"},
        {"name": 85, "category": "tags"},
        {"name": 86, "category": "talks"},
        {"name": 87, "category": "talks"},
        {"name": 88, "category": "tags"},
        {"name": 89, "category": "tags"},
        {"name": 90, "category": "talks"},
        {"name": 91, "category": "tags"},


    
    ],
    "links": [//节点之间连接
        {"source": 0, "target": 1},
        {"source": 1, "target": 2},
        {"source": 2, "target": 3},
        {"source": 3, "target": 0},
        {"source": 2, "target": 4},
        {"source": 4, "target": 0},
        {"source": 5, "target": 6},
        {"source": 6, "target": 7},
        {"source": 7, "target": 8},
        {"source": 8, "target": 5},
        {"source": 7, "target": 9},
        {"source": 10, "target": 11},
        {"source": 11, "target": 12},
        {"source": 12, "target": 13},
        {"source": 13, "target": 10},
        {"source": 14, "target": 15},
        {"source": 15, "target": 16},
        {"source": 16, "target": 17},
        {"source": 16, "target": 18},
        {"source": 19, "target": 20},
        {"source": 20, "target": 21},
        {"source": 21, "target": 22},
        {"source": 19, "target": 23},
        {"source": 24, "target": 25},
        {"source": 25, "target": 26},
        {"source": 26, "target": 27},
        {"source": 28, "target": 29},
        {"source": 29, "target": 30},
        {"source": 31, "target": 32},
        {"source": 31, "target": 33},
        {"source": 33, "target": 34},
        {"source": 34, "target": 35},
        {"source": 34, "target": 36},
        {"source": 36, "target": 31},
        {"source": 37, "target": 38},
        {"source": 37, "target": 39},
        {"source": 39, "target": 40},
        {"source": 40, "target": 41},
        {"source": 40, "target": 42},
        {"source": 43, "target": 44},
        {"source": 43, "target": 45},
        {"source": 45, "target": 46},
        {"source": 46, "target": 47},
        {"source": 48, "target": 49},
        {"source": 48, "target": 50},
        {"source": 50, "target": 51},
        {"source": 51, "target": 52},
        {"source": 52, "target": 48},
        {"source": 53, "target": 54},
        {"source": 53, "target": 55},
        {"source": 55, "target": 56},
        {"source": 56, "target": 57},
        {"source": 58, "target": 59},
        {"source": 58, "target": 60},
        {"source": 60, "target": 61},
        {"source": 58, "target": 62},
        {"source": 63, "target": 64},
        {"source": 63, "target": 65},
        {"source": 65, "target": 66},
        {"source": 67, "target": 68},
        {"source": 67, "target": 69},
        {"source": 67, "target": 70},
        {"source": 71, "target": 72},
        {"source": 71, "target": 73},
        {"source": 74, "target": 75},
        {"source": 76, "target": 77},
        {"source": 77, "target": 78},
        {"source": 78, "target": 79},
        {"source": 79, "target": 76},
        {"source": 80, "target": 81},
        {"source": 81, "target": 82},
        {"source": 82, "target": 83},
        {"source": 84, "target": 85},
        {"source": 85, "target": 86},
        {"source": 87, "target": 88},
        {"source": 87, "target": 89},
        {"source": 90, "target": 91}

    
    ]
};
    myChart.hideLoading();
 
    option = {
        legend: {
            data: ['talks','speakers','tags']//此处的数据必须和关系网类别中name相对应
        },
        series: [{
            type: 'graph',
            layout: 'force',
            animation: false,
            label: {
                normal: {
                    show:true,
                    position: 'right'
                }
            },
            draggable: true,
            data: webkitDep.nodes.map(function (node, idx) {
                node.id = idx;
                return node;
            }),
            categories: webkitDep.categories,
            force: {
                edgeLength: 105,//连线的长度
                repulsion: 100  //子节点之间的间距
            },
            edges: webkitDep.links
        }]
    };
    myChart.setOption(option);

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>